<template>
  <!--座席提交-->
  <div class="submitted" v-if="isShowSubmitted">
    <div class="top">
      <!--<affix :label="$t('qualityCheck.condition')"></affix>-->
      <div class="tem">
        <span class="temp">{{$t('qualityCheck.qualityTemplateClass')}}：</span>
        <el-radio-group v-model="webOrCallTemp" @change="tempStateChange">
          <el-radio :label="1">{{$t('qualityCheck.qualityTemplateClassCall')}}</el-radio>
          <el-radio :label="2">{{$t('qualityCheck.qualityTemplateClassWeb')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="tem">
        <span class="temp">{{$t('qualityCheck.qualityTemplate')}}：</span>
        <el-select style="margin-left: 42px;" size="mini" v-model.trim="value" @change="change" v-if="QCTempItems.length !== 0">
          <el-option
            v-show="webOrCallTemp === 2?item.QUALITY_TYPE === 'qualityWebchat':item.QUALITY_TYPE !== 'qualityWebchat'"
            v-for="(item, index) in QCTempItems"
            :key="index"
            :label="item.name"
            :value="index">
          </el-option>
        </el-select>
        <span v-else>{{$t('qualityCheck.pleaseExployModel')}}</span>
        <span class="ui-unfold-span">
          <span @click="isShowFold = false" v-show="isShowFold">{{$t('report.foldedContition')}} <i class="el-icon-arrow-up"></i></span>
          <span @click="isShowFold = true" v-show="!isShowFold">{{$t('report.unfoldedContition')}} <i class="el-icon-arrow-down"></i></span>
        </span>
      </div>
      <Unfold :title="unfoldTitle" :isShow="isShowFold" style="margin-bottom: 20px">
        <template slot="unfoldSlot">
          <div v-if="QCTempItems.length!==0">
            <div class="sear" v-show="webOrCallTemp===1">
              <el-form label-position="top" :inline="true" :model="callForm" :rules="rules" ref="callForm"  class="demo-form-inline">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['n1','n2']"
                                      v-model.trim="callForm.beginTime"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      :editable="boolean"
                                      @change=callTimeChange>
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('call.callType')+':'">
                      <el-select size="mini" v-model.trim="callForm.CONNECT_TYPE" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in callTypeList"
                          :label="item.code_name"
                          :key="index"
                          :value="item.code_value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.callAgent')+':'" v-show="callAgentShow">
                      <!-- <el-select size="mini" v-model.trim="callForm.DISPOSAL_AGENT" filterable :placeholder="'--'+$t('webchat.webchatAll')+'--'">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in callAgentList"
                          :label="item.labelCall"
                          :key="index"
                          :value="item._id"
                        >
                          <span >{{ item.displayName }}</span>
                          <span >[<span>{{ item.exten }}</span>]</span>
                        </el-option>
                      </el-select> -->
                      <m7Select class="m7_select" filterable :placeholder="$t('qualityCheck.skillGroupSearch')" :options="[...baseObj, ...selectAgents]" v-model="callForm.DISPOSAL_AGENT"></m7Select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model.trim="callForm.ERROR_MEMO" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in callQueueList"
                          :label="item.DisplayName"
                          :key="index"
                          :value="item.Exten"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.callingNumber')+':'" prop="CALL_NO">
                      <el-input size="mini" v-model.trim="callForm.CALL_NO" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.calledNumber')+':'" prop="CALLED_NO" class="called">
                      <el-input size="mini" v-model.trim="callForm.CALLED_NO" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <el-select size="mini" v-model.trim="callForm.INVESTIGATE" filterable :placeholder="'--'+$t('webchat.webchatAll')+'--'+':'">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option value="unevaluated" :label="'--'+$t('public.unevaluated')+'--'"></el-option>
                        <el-option
                          v-for="(item, index) in satisfactionList"
                          :label="item.name"
                          :key="index"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.submitTime')+':'">
                      <!--<el-col class="label-select-wrap ml">-->
                      <el-date-picker size="mini"
                                      style="width:100%;"
                                      :id="['o1','o2']"
                                      v-model.trim="callForm.submitTime"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      :editable="boolean"
                                      @change=submitCallTimeChange>
                      </el-date-picker>
                      <!--</el-col>-->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="check-padding">
                      <el-form-item prop="CALL_TIME_LENGTH_BEGIN" :label="$t('qualityCheck.callTimeMin')+':'">
                        <el-input size="mini" placeholder="" v-model.trim="callForm.CALL_TIME_LENGTH_BEGIN">
                          <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="check-padding">
                      <el-form-item prop="CALL_TIME_LENGTH_END" :label="$t('qualityCheck.callTimeMax')+':'">
                        <el-input size="mini" placeholder="" v-model.trim="callForm.CALL_TIME_LENGTH_END">
                          <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                        </el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callLabel')+':'">
                      <el-col class="label-select-wrap">
                        <label-cascader @labelSelect="labelSelect" :isNoLabel="true" :resetSelect="resetSelect" :needType="true"></label-cascader>
                      </el-col>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!--在线质检查询条件==========================-->
            <div class="sear" v-show="webOrCallTemp===2">
              <el-form label-position="top" :inline="true" :model="chatForm" :rules="rules" ref="chatForm"  class="demo-form-inline">
                <el-form-item label="">
                  <el-checkbox v-model="chatForm.skipQuality" @change="query">{{$t('qualityCheck.showSkippedData')}}</el-checkbox>
                </el-form-item>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.createTime')+':'">
                      <el-date-picker size="mini"
                                      v-model.trim="chatForm.createTime"
                                      :id="['c1','c2']"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      :editable="boolean"
                                      @change="createTimeChange"
                                      :clearable="false">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" class="">
                    <el-form-item :label="$t('public.agent')+':'">
                      <m7Select class="m7_select" filterable :placeholder="$t('qualityCheck.skillGroupSearch')" :options="[...baseObj, ...agentList]" v-model="chatForm.user"></m7Select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.endType')+':'">
                      <el-cascader
                        popper-class="webchat-finish"
                        style="width:100%"
                        :options="closeOptions"
                        filterable
                        v-model.trim="activeFinish"
                        change-on-select
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <el-select size="mini" v-model.trim="chatForm.appraiseKey" filterable :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option :label="'--'+$t('public.unevaluated')+'--'" value="unevaluated"></el-option>
                        <el-option
                          v-for="(item, index) in appraiseList"
                          :label="item.name"
                          :value="item.key"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.platformSource')+':'">
                      <el-select size="mini" v-model.trim="chatForm.platform" :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                                v-for="(item, index) in platforms"
                                :label="item.label"
                                :value="item.value"
                                :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.takeTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['m1','m2']"
                                      v-model.trim="chatForm.beginTime"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      :editable="boolean"
                                      align="right"
                                      style="margin-left: 0;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model.trim="chatForm.toPeer" filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                        <el-option
                          v-for="(item, index) in webchatQueueList"
                          :key="index"
                          :label="item.DisplayName"
                          :value="item.Exten">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.msgNum')+':'">
                      <el-radio-group v-model.trim="chatForm.msgCountType" style="margin-left:-18px;">
                        <el-radio size="mini" label="gt" >{{$t('webchat.moreThan')}}</el-radio>
                        <el-radio size="mini" label="lt" >{{$t('webchat.lessThan')}}</el-radio>
                        <el-radio size="mini" label="eq" >{{$t('webchat.equal')}}</el-radio>
                      </el-radio-group>
                      <el-input style="margin-left:20px;width:90px;" size="mini" v-model.trim="chatForm.msgCount" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.customerName')+':'" prop="CUSTOMER_NAME">
                      <el-input size="mini" v-model.trim="chatForm.sName" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.submitTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['o1','o2']"
                                      v-model.trim="chatForm.submitTime"
                                      :editable="boolean"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </template>
      </Unfold>
      <div class="sub">
        <el-button class="primary_btn report_excel_btn" @click="rest">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click="queryList">{{$t('public.search2')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')"></affix>
      <!-- 通话质检 -->
      <call-grade :callDialogShow="callDialogShow" @close="off" :flagId="flagId" :currentItemCall = "this.currentItemCall"  :currentGrade = "{}"  :template = "this.template" @saveGrade="saveGradeSubmit" @nextGrade="nextGrade" :qcResectLabel="qcResectLabel" @off="off" @handle="handle" :refreshCallGrade="refreshCallGrade"></call-grade>
      <!-- 在线客服质检 -->
      <webchat-grade :webchatDialogShow="webchatDialogShow" v-if="webChatIsShow" @close="off" :currentItemWebchat="this.currentItemWebchat" :currentItem = "this.currentItem" :currentGrade = "{}" :template = "this.template" @off="off" @saveGrade="saveGrade" @nextGrade="nextGrade"></webchat-grade>
      <big-image :imgInfo="bigImage" @closeImageDialog="closeBigImage"></big-image>
    </div>
    <div class="tables" v-show="isSearchState" v-loading="SubmittedTableLoading" v-if="isShowSubmittedTable && webOrCallTemp === 1">
      <div class="deploy">
        <div class="table-header-config">
          <i class="iconfont icon-peizhi"></i>
          <span class="tex" @click.stop="setHeaderConfig">{{$t('report.setHeaderConfig')}}</span>
        </div>
        <div class="search-pagination">
          <pagination
            :small="pagination.small"
            :currentPage="paginationCall.currentPage"
            :count="count"
            @turnPage="turnPage"
            :totalPage="totalPage">
          </pagination>
        </div>
      </div>
      <el-table :data="tableData" size="mini">
        <el-table-column
          :width="item.name === 'OFFERING_TIME' || item.name === 'CALL_NO_SHOW' ? '160' : ''"
          :show-overflow-tooltip="true"
          v-for="(item, index) in tableDataHeader.Config"
          :key="index"
          v-if="item.show === true"
          :prop="item.name"
          :label="item.displayname">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="submitTime" :label="$t('qualityCheck.agentSubmitTime')" width="160">
        </el-table-column>
        <el-table-column  :label="$t('public.operate')" width="130">
          <template scope="scope2">
            <el-button @click="handle(scope2.row)" type="text" size="small">{{$t('qualityCheck.grade')}}</el-button>
            <el-button type="text" @click="look(scope2.row._id)" size="small" >{{$t('qualityCheck.viewLook')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tables" v-show="!isHaveData" v-loading="webLoading" v-if="webOrCallTemp === 2">
      <div class="deploy">
        <div class="table-header-config">
          <i class="iconfont icon-peizhi"></i>
          <span class="tex" @click.stop="setHeaderConfig">{{$t('report.setHeaderConfig')}}</span>
        </div>
        <div class="search-pagination">
          <pagination
                  :small="pagination.small"
                  :currentPage="pagination.currentPage"
                  :count="pagination.allCount"
                  @turnPage="turnPage"
                  :totalPage="pagination.totalPage"
                  >
          </pagination>
        </div>
      </div>
      <el-table :data="chatTableData" size="mini">
        <el-table-column
          :show-overflow-tooltip="true"
          v-for="(item, index) in chatTableDataHeader.Config"
          :key="index"
          v-if="item.show === true"
          :prop="item.name"
          :label="item.displayname">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="applyQcWebchatTime" :label="$t('public.submitTime')" width="160">
        </el-table-column>
        <el-table-column  :label="$t('public.operate')" width="130">
          <template scope="scope2">
            <el-button @click="handle(scope2.row)" type="text" size="small">{{$t('qualityCheck.grade')}}</el-button>
            <el-button type="text" @click="look(scope2.row._id)" size="small" >{{$t('qualityCheck.viewLook')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--<div v-show="!isSearchState" style="text-align: center;padding: 20px;">-->
      <!--{{$t('public.pleaseSearch')}}-->
    <!--</div>-->
    <!--查看日志-->
    <div class="looklog">
      <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isShow" :title="title">
        <div class="tables">
          <div class="deploy">
            <div class="search-pagination">
              <pagination
                :small="paginationRecord.small"
                :currentPage="paginationRecord.currentPage"
                :count="countRecord"
                @turnPage="turnPageRecord"
                :totalPage="totalPageRecord"
              >
              </pagination>
            </div>
          </div>
          <el-table :data="recordList" style="width: 100%" size="mini">
            <el-table-column prop="user" :label="listenpp" width="">
            </el-table-column>
            <el-table-column prop="" label="" width="">
            </el-table-column>
            <el-table-column prop="time" :label="listenTime" width="">
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
    <!--配置表头-->
    <header-option v-show="isShowTableConfig" :show="isShowTableConfig" :option="headOptions" :type="tableConfigType" v-on:close="closeTableConfig"></header-option>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import {deepClone, getDateTime, getCache, scopeAgents, m7Language, getFormatDateTime, updateAllOptions, initFinishName, isHasFunc} from '@/utils/m7Utils.js'
  import {checkform} from '@/utils/validate.js'
  import item from './item'
  import WebchatGrade from './WebchatGrade'
  import BigImage from '@/components/public-modules/bigImage/BigImage'
  import CallGrade from './CallGrade'
  import LabelCascader from '@/components/public-modules/phone-bar/LabelCascader.vue'
  import Affix from '../../../ui-modules/affix/Affix.vue'
  import Unfold from '../../../ui-modules/unfold/index.vue'
  import headerOption from '../../report/base/headerOption.vue'
  import AgentTree from '../base/qualityAgentTree.vue'
  import BaseTable from '../base/BaseTable.vue'
  import bus from '@/store/eventBus'
  export default {
    name: 'submitted',
    props: {
      refresh: String
    },
    data () {
      let validate1 = (rule, value, callback) => {
        if (value !== '') {
          let match = checkform(value, 'Number3')
          if (match) {
            callback(new Error(this.$t('qualityCheck.pleaseEnterRightNum')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validate2 = (rule, value, callback) => {
        if (value !== '') {
          let match = checkform(value, 'Number3')
          if (match) {
            callback(new Error(this.$t('qualityCheck.pleaseEnterPositiveInteger')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        webOrCallTemp: 1,
        baseObj: [{label: this.$t('public.all'), value: '', id: ''}],
        isShowSubmitted: false,
        isSearchState: false,
        isShowSubmittedTable: false,
        SubmittedTableLoading: false,
        beforeMountState: false,   //   beforemount 时 不查数据  避免各模块  数据冲突
        value: '',
        boolean: false,
        isSave: false,
        currentIndex: 0,
        webchatDialogShow: false,
        callDialogShow: false,
        qcResectLabel: false,
        currentItem: {},
        currentItemCall: {},
        webchatCustData: {},
        currentItemWebchat: {},
        callForm: {
          beginTime: '',
          submitTime: '',
          CONNECT_TYPE: '',
          DISPOSAL_AGENT: '',
          ERROR_MEMO: '',
          CALLED_NO: '',
          CALL_NO: '',
          INVESTIGATE: '',
//          multiFirst: '',
//          multiTwo: '',
//          multiThree: '',
          singleLabel: '',
          CALL_TIME_LENGTH_BEGIN: '',
          CALL_TIME_LENGTH_END: ''
        },
        chatForm: {
          beginTime: '',
          createTime: '',
          finishKey: '',
          user: '',
          appraiseKey: '',
          msgCount: '',
          msgCountType: '',
          platform: '',
          sName:'',
          submitTime: ''
        },
        chatTableData: [],
        chatTableDataHeader: {},
        webLoading: false,
        activeFinish: [],
        sessionOptions: [],
        closeOptions: [],
        platforms: [
          {label: this.$t('webchat.websiteCon'), value: 'pc'},
          {label: this.$t('webchat.wapCon'), value: 'wap'},
          {label: this.$t('webchat.appCon'), value: 'sdk'},
          {label: this.$t('webchat.weChatCon'), value: 'weixin'},
          {label: this.$t('webchat.weChatMini'), value: 'wxmini'},
          {label: this.$t('webchat.weBoCon'), value: 'weibo'},
          {label: this.$t('webchat.enterpriseShot'), value: 'wxwork'},
          {label: this.$t('webchat.baiduBCP'), value: 'ocpc'},
          {label: this.$t('webchat.TikTok'), value: 'dy'},
          {label: this.$t('webchat.platformWXKF'), value: 'wxkf'}
        ],
        webchatQueueList: [],
        template: {},
        isShow: false,
        title: '',
        listenTime: '',
        listenpp: '',
        rules: {
          CALL_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALLED_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_BEGIN: [
            {validator: validate2, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_END: [
            {validator: validate2, trigger: 'blur'}
          ]
        },
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        refreshCallGrade: 0,
        recordList: [],
        finishReasonList: [],
        agentList: [],
        labelType: 'single',
        labelDataCache: [],
        labelData: {},
        configList: [],
        callTypeList: [],
        callAgentList: [],
        callQueueList: [],
        appraiseList: [],
        satisfactionList: [],
        QCTempItems: [],
        pagination: {
          small: false,
          currentPage: 1,
          totalPage: 0,
          allCount: 0
        },
        paginationCall: {
          small: false,
          currentPage: 1
        },
        paginationRecord: {
          small: false,
          currentPage: 1
        },
        currentId: '',
        callAgentShow: false,    // 是否有显示座席信息权限
        getCallCache: false,
        getWebchatCache: false,
        bigImage: {
          bigImageShow: false,
          url: ''
        },
        resetSelect: false,
        flagId: 'submitted',
        countRecord: 0,
        totalPageRecord: 1,
        unfoldTitle: [], // 展开收起标题
        isShowFold: true, // 展开收起标题
        isShowTableConfig: false, // 配置表头
        headOptions: {},    //  配置表头
        tableConfigType: 'quality_call_table_title',
        webChatIsShow: false // 在线咨询评分
      }
    },
    watch: {
      refresh (cur, old) {
        if (cur === 'submitted') {
//          this.query()
        }
      }
    },
    components: {
      item,
      Pagination,
      WebchatGrade,
      CallGrade,
      BigImage,
      LabelCascader,
      Affix,
      Unfold,
      headerOption,
      AgentTree,
      BaseTable
    },
    methods: {
      labelSelect (data) { // 子组件外抛出来的表单
        this.resetSelect = false
        if (data.type === 'multi') {
          this.callForm.multiLabel = data.arr && data.arr[0] ? data.arr : []
          delete this.callForm.singleLabel
        } else {
          delete this.callForm.multiLabel
          this.callForm.singleLabel = data.arr[0] || ''
        }
      },
//      座席提交情况下  质检要先做下处理
      saveGradeSubmit (gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE) {
        this.$store.dispatch('querySubmitedCdr', this.currentItemCall.CALL_SHEET_ID).then(res => {
          if (res.success) {
            if (res.data && res.data !== {}) {
              this.saveGradeSubmitPerformance(gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
            } else {
//              该录音已撤回,无法评分！
              this.$message.error(this.$t('qualityCheck.beichehuiwufapingfen'))
            }
          }
        })
      },
      renderWebchatCache () {
        this.getWebchatCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          var webchatAgents = []
          agents.forEach((item) => {
            item.labelCall = item.displayName + '[' + item.exten + ']'
            webchatAgents.push({value: item._id, label: item.labelCall})
          })
          webchatAgents.unshift({value: '', label: this.$t('public.pleasePick')})
          self.agentList = webchatAgents
        })
        this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
          let _dics = []
          for (var i = 0; i < dics.length; i++) {
            let obj = dics[i]
            if (obj.type === 'webchat') {
              _dics = obj.options || []
              break
            }
          }
          for (var i = 0; i < dics.length; i++) {
            let obj = dics[i]
            if (obj.type === 'webchatCSR') {
              self.appraiseList = obj.options || []
              break
            }
          }
          this.finishOptions = initFinishName(_dics, {})
          let finishKeys = []
          updateAllOptions(_dics, {Arr: this.sessionOptions})
          this.closeOptions = [
            {label: this.$t('webchat.webchatAll'), value: ''}, ...this.sessionOptions,
            {label: this.$t('webchat.addBlack'), value: 'add_black'}
          ]
        })
      },
//      处理质检数量  是否 选中 绩效录音 选项
      saveGradeSubmitPerformance (gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE) {
        if (RECORDING_PERFORMANCE) {
//          绩效录音 被选中 时 走的线路
          let data = {}
          data.exten = this.currentItemCall.DISPOSAL_AGENT
          data.offerTime = this.currentItemCall.OFFERING_TIME
          this.$store.dispatch('queryPerformanceRelatedNumByExten', data).then(res => {
            if (res.success) {
              let list = res.list
              let offerTime = data.offerTime
              let DISPOSALAGENT = data.exten
              this.checkCount(list, offerTime, DISPOSALAGENT, gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
            }
          })
        } else {
//          绩效录音 没有被选中
          this.saveGrade(gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
        }
      },
//      计算阀值
      checkCount (list, offerTime, DISPOSALAGENT, gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE) {
        if (list.length === 0) {
          this.saveGrade(gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
        } else {
          let item = list[0]
          let begin = item.cycleInfo.cycleBegins
          let end = item.cycleInfo.cycleEnds
          let interval = item.cycleInfo.cycleInterval === null ? 'null' : item.cycleInfo.cycleInterval
          let pieces = this.construct_cycle_interval(begin, end, interval)
          for (let k = 0; k < pieces.length; k++) {
            let pieceBegin = getDateTime(new Date(JSON.parse(pieces[k]).bDate)).substr(0, 10)
            let pieceEnd = getDateTime(new Date(JSON.parse(pieces[k]).eDate)).substr(0, 10)
            if (offerTime >= pieceBegin && offerTime <= pieceEnd) {
              pieceBegin = pieceBegin + ' 00:00:00'
              pieceEnd = pieceEnd + ' 00:00:00'
              let data = {}
              data.DISPOSAL_AGENT = DISPOSALAGENT
              data.OFFERING_TIME = {$gte: pieceBegin, $lte: pieceEnd}
              this.$store.dispatch('queryPerformanceRelatedCdrCount', data).then(res => {
                if (res.success) {
                  if (res.count >= parseInt(item.threshold)) {
                    let intervalInfo = this.$t('qualityCheck.cycle')
                    if (item.cycleInfo.cycleInterval === 7) {
                      intervalInfo = this.$t('qualityCheck.week')
                    } else if (item.cycleInfo.cycleInterval === 1) {
                      intervalInfo = this.$t('public.day')
                    } else if (item.cycleInfo.cycleInterval === null || item.cycleInfo.cycleInterval === 'null') {
                      intervalInfo = this.$t('public.month')
                    }
                    this.$store.dispatch('getCache', {type: 'agents', id: DISPOSALAGENT}).then(resp => {
                      let agent = resp
                      let isPRCdrTitle = this.$t('qualityCheck.isPRCdrTitle', {displayName: agent.displayName, exten: agent.exten, intervalInfo: intervalInfo, countMessage: res.count})
//                      let isPRCdrTitle = this.$t('qualityCheck.zuoxi') + agent.displayName + '[' + agent.exten + ']' + this.$t('qualityCheck.zaiben') + intervalInfo + this.$t('qualityCheck.saved') + res.count + this.$t('qualityCheck.isSaved')
                      this.$confirm(isPRCdrTitle, this.$t('public.tip'), {
                        confirmButtonText: this.$t('public.confirm'),
                        cancelButtonText: this.$t('public.cancel'),
                        cancelButtonClass: 'primary_btn',
                        confirmButtonClass: 'primary_btn',
                        type: 'warning'
                      }).then(() => {
                        RECORDING_PERFORMANCE = true
                        this.checkCount([], offerTime, DISPOSALAGENT, gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
                      }).catch(() => {
                        RECORDING_PERFORMANCE = false
                        this.checkCount([], offerTime, DISPOSALAGENT, gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
                      })
                    })
                  } else {
                    list.shift()
                    this.checkCount(list, offerTime, DISPOSALAGENT, gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE)
                  }
                }
              })
              break
            }
          }
        }
      },
//      计算周期数
      construct_cycle_interval (begin, end, interval) {
        var intervalArray = []
        var bDate = new Date(Date.parse(begin + ' 00:00:00'))
        var eDate = new Date(Date.parse(end + ' 00:00:00'))
        var tDate = bDate
        let tTime = tDate.getTime()
        let eTime = eDate.getTime()
        while (tTime <= eTime) {
          var intervalObj = {}
          intervalObj.bDate = tDate.getTime()
          if (interval !== 'null') {
            interval = parseInt(interval)
            tDate.setDate(tDate.getDate() + interval)
          } else {
            tDate.setMonth(tDate.getMonth() + 1)
          }
          tTime = tDate.getTime()
          eTime = eDate.getTime()
          if (tTime > eTime) {
            intervalObj.eDate = eDate.getTime() + 86400000
          } else {
            intervalObj.eDate = tDate.getTime()
          }
          intervalArray.push(JSON.stringify(intervalObj))
        }
        return intervalArray
      },
      nextGrade () {
        this.isSave = true
        let passId = this.tempList[this.currentIndex]._id
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$store.dispatch('skipQualitySession', {_id: passId})
        } else {
          this.$store.dispatch('skipQualityCallSheet', {_id: passId})
        }
        this.$store.commit('deleteGraded/qualityCheckSubmit', this.currentIndex)
        this.$store.commit('deleteGraded/qualityCheckSubmit', 1)
        if (this.tempList.length <= 0) {
          this.$message.success(this.$t('qualityCheck.allRatingFinish'))
          this.webchatDialogShow = false
          this.callDialogShow = false
          this.query()
        } else {
          this.$message.success(this.$t('qualityCheck.nextGrade'))
          this.handle(this.tempList[0])
        }
      },
//      评分 保存
      saveGrade (gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE) {
        this.isSave = true
        this.$store.commit('deleteGraded/qualityCheckSubmit', this.currentIndex)
        if (RECORDING_PERFORMANCE) {
          //    保存绩效 录音
          this.$store.dispatch('savePerformanceRelatedCdr', this.currentItemCall.CALL_SHEET_ID).then(res => {
            if (!res.success) {
//              保存绩效录音失败
              this.$message.error(this.$t('qualityCheck.saveMarkFail'))
            }
          })
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          let data = deepClone(gradeObj)
          data._id = this.currentItem._id
          data.TEMPLATE = this.template._id
          data.values = gradeObj.obj
          let self = this
          this.$store.dispatch('saveWebchatSheetGrade', {data, currentItem: this.currentItem}).then((res) => {
            if (res && res.success) {
              self.webchatDialogShow = false
              this.$store.commit('deleteGraded/qualityCheckSubmit', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        } else if (this.template.type === 'pass') {
          let data = {}
          data.CALL_SHEET_ID = this.currentItemCall.CALL_SHEET_ID
          gradeObj.config.amount = gradeObj.grade.amount
          data.QUALITY_GRADE = gradeObj.config
          data.COMMENTS = gradeObj.grade.COMMENT
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.OFFERING_TIME = this.currentItemCall.OFFERING_TIME
          GRADE_DATA.DISPOSAL_AGENT = this.currentItemCall.DISPOSAL_AGENT
          GRADE_DATA.CALL_NO = this.currentItemCall.CALL_NO
          GRADE_DATA.CALLED_NO = this.currentItemCall.CALLED_NO
          GRADE_DATA.CONNECT_TYPE = this.currentItemCall.CONNECT_TYPE
          GRADE_DATA.ERROR_MEMO = this.currentItemCall.ERROR_MEMO
          GRADE_DATA.CALL_TIME_LENGTH = this.currentItemCall.CALL_TIME_LENGTH
          GRADE_DATA.FILE_SERVER = this.currentItemCall.FILE_SERVER
          GRADE_DATA.RECORD_FILE_NAME = this.currentItemCall.RECORD_FILE_NAME
          GRADE_DATA.INVESTIGATE = this.currentItemCall.INVESTIGATE
          GRADE_DATA.GRADE_AMOUNT = gradeObj.config
          GRADE_DATA.COMMENTS = gradeObj.COMMENT
          GRADE_DATA.TEMPLATE = this.template._id
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.QC_SUBMIT = true  //   系统抽取 false   座席提交  true
          GRADE_DATA.submit_time = submitTime  //   提交时间
          GRADE_DATA.RECORDING_PERFORMANCE = RECORDING_PERFORMANCE  //   绩效录音 是否被选中
          data.GRADE_DATA = GRADE_DATA
          data.SQ_LABEL = SQlabel
          data.MONITOR_TYPE = monitorType
          let self = this
          this.$store.dispatch('saveCallShellGrade', {data}).then((res) => {
            if (res && res.success) {
              self.callDialogShow = false
              self.qcResectLabel = false
              this.$store.commit('deleteGraded/qualityCheckSubmit', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        } else {
          let data = {}
          data.CALL_SHEET_ID = this.currentItemCall.CALL_SHEET_ID
          data.QUALITY_GRADE = gradeObj.grade
          data.COMMENTS = gradeObj.COMMENT
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.OFFERING_TIME = this.currentItemCall.OFFERING_TIME
          GRADE_DATA.DISPOSAL_AGENT = this.currentItemCall.DISPOSAL_AGENT
          GRADE_DATA.CALL_NO = this.currentItemCall.CALL_NO
          GRADE_DATA.CALLED_NO = this.currentItemCall.CALLED_NO
          GRADE_DATA.CONNECT_TYPE = this.currentItemCall.CONNECT_TYPE
          GRADE_DATA.ERROR_MEMO = this.currentItemCall.ERROR_MEMO
          GRADE_DATA.CALL_TIME_LENGTH = this.currentItemCall.CALL_TIME_LENGTH
          GRADE_DATA.FILE_SERVER = this.currentItemCall.FILE_SERVER
          GRADE_DATA.RECORD_FILE_NAME = this.currentItemCall.RECORD_FILE_NAME
          GRADE_DATA.INVESTIGATE = this.currentItemCall.INVESTIGATE
          GRADE_DATA.GRADE_AMOUNT = gradeObj.grade
          GRADE_DATA.COMMENTS = gradeObj.COMMENT
          GRADE_DATA.TEMPLATE = this.template._id
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.QC_SUBMIT = true  //   系统抽取 false   座席提交  true
          GRADE_DATA.submit_time = submitTime  //   提交时间
          GRADE_DATA.RECORDING_PERFORMANCE = RECORDING_PERFORMANCE  //   绩效录音 是否被选中
          data.SQ_LABEL = SQlabel
          data.MONITOR_TYPE = monitorType
          for (let i in gradeObj.obj) {
            GRADE_DATA[i] = gradeObj.obj[i]
          }
          data.GRADE_DATA = GRADE_DATA

          let self = this
          this.$store.dispatch('saveCallGradeForScore', {data}).then((res) => {
            if (res.success) {
              self.callDialogShow = false
              self.qcResectLabel = false
              // 删除tempList评价完的那个
              this.$store.commit('deleteGraded/qualityCheckSubmit', 1)
              if (self.tempList.length <= 0) {
                self.$message.success(this.$t('qualityCheck.allRatingFinish'))
                this.query()
              } else {
                self.$message.success(this.$t('qualityCheck.rateSuccessNext'))
                this.handle(self.tempList[0])
              }
            }
          })
        }
      },
      closeBigImage () {
        this.bigImage.bigImageShow = false
        this.bigImage.url = ''
      },
      shwoBigImage (data) {
        if (this.qualityCheck) {
          return
        }
        this.bigImage.url = data
        this.bigImage.bigImageShow = true
      },
//      查看日志
      look (_id) {
        this.paginationRecord.currentPage = 1
        this.countRecord = 0
        this.totalPageRecord = 0
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(_id, 1)
        } else {
          this.queryRecordCallListenLog(_id, 1)
        }
      },
      queryRecordWebchatSessionLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.onlineWebchatLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordWebchatSessionLog', {'sessionId': _id, 'page': page, 'pageSize': 10}).then(() => {
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
      queryRecordCallListenLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.callQualityLookLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordCallListenLog', {'CALL_SHEET_ID': _id, 'page': page, 'pageSize': 10}).then(() => {
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
//      查看日志 结束
//      关闭 质检 dialog
      off () {
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.webchatDialogShow = false
        this.callDialogShow = false
        this.qcResectLabel = false
        if (this.isSave === true) {
          this.query()
        }
      },
//      重置  条件
      rest () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          for (let i in this.chatForm) {
            if (i === 'createTime') {
              this.chatForm[i] = this.chatCreateTimeReset()
            } else {
              this.chatForm[i] = ''
            }
          }
          this.activeFinish = ''
        } else {
          for (let i in this.callForm) {
            this.callForm[i] = ''
          }
          this.resetSelect = true
        }
      },
//      表格中 点击 评分 按钮
      handle (data) {
        this.currentIndex = 0
        for (let i = 0; i < this.tempList.length; i++) {
          if (this.tempList[i]._id === data._id) {
            this.currentIndex = i
            break
          }
        }
        var num = this.tempList.length - this.currentIndex
        if (num < 5) {
          const tempObj = this.tempList[this.tempList.length - 1]
          let OFFERINGTIME = tempObj ? tempObj.OFFERING_TIME : ''
          if (OFFERINGTIME) {
            setTimeout(this.getMoreQualityCheckSubmittedCallSheet(OFFERINGTIME), 1000)
          }
        }
        if (data.REPEAT_CALL) {
          data.repeatCall = data.REPEAT_CALL === '48h' ? this.$t('call.repeatCall48h') : this.$t('call.repeatCall24h')
        } else {
          data.repeatCall = '--'
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.webchatDialogShow = true
          let self = this
          this.$store.dispatch('recordWebchatSessionLog', {_id: data._id})
          self.currentItem = data
          self.webChatIsShow = true
          this.$store.dispatch('queryBusiness', {linkWebchat: data._id, sid: data.sid}).then((response) => {
            if (response && response.length > 0) {
              data.busHistory = [response[0]]
            } else {
              data.busHistory = []
            }
            self.currentItemWebchat = data
          })
          bus.$emit('webchatScoreFetch')
        } else {
          this.$store.dispatch('recordListenLog', {CALL_SHEET_ID: data._id})
          this.callDialogShow = true
          this.qcResectLabel = true
          let self = this
          let pro1 = this.$store.dispatch('queryBusiness', {callId: data._id, customer: data.CUSTOMER_ID})
          let pro2 = this.$store.dispatch('getQualityedCheckCallSheet', {data: data._id})
          Promise.all([pro1, pro2]).then(([rep1, rep2]) => {
            this.recordFileName(data.FILE_SERVER, data.RECORD_FILE_NAME, data.PBX, function (url) {
              data.audio = url
              if (rep1 && rep1.length > 0) {
                data.busHistory = [rep1[0]]
              } else {
                data.busHistory = []
              }
              self.currentItemCall = data
              self.currentItemCall.LABELS = rep2.LABELS || []
              self.refreshCallGrade = Math.random()
            })
          })
//          this.$store.dispatch('queryBusiness', {callId: data._id, customer: data.CUSTOMER_ID}).then((res) => {
//            let self = this
//            this.recordFileName(data.FILE_SERVER, data.RECORD_FILE_NAME, data.PBX, function (url) {
//              data.audio = url
//              if (res && res.length > 0) {
//                data.busHistory = [res[0]]
//              } else {
//                data.busHistory = []
//              }
//              self.currentItemCall = data
//              self.refreshCallGrade = Math.random()
//            })
//          })
        }
      },
      getMoreQualityCheckSubmittedCallSheet (OFFERINGTIME) {
        let dataCdrList = {}
        if (this.callForm.submitTime && this.callForm.submitTime[0] !== null && this.callForm.submitTime[1] !== null) {
          dataCdrList.submitTime = {}
          dataCdrList.submitTime['$gte'] = this.callForm.submitTime[0].getTime()
          dataCdrList.submitTime['$lte'] = this.callForm.submitTime[1].getTime()
        }
        this.$store.dispatch('querySubmitedCdrList', dataCdrList).then((res) => {
          if (!res.success) {
            this.$message.error(this.$t('message.default_tips'))
            return
          }
          this.ids = []
          this.submitTimeInfo = {}
          let list = res.list
          for (let i = 0; i < list.length; i++) {
            let id = list[i].callSheetId
            this.ids.push(id)
            this.submitTimeInfo[id] = list[i].submitTime
          }
          if (this.callForm.beginTime && this.callForm.beginTime[0] !== null) {
            this.callForm.BEGIN_TIME = getDateTime(this.callForm.beginTime[0])
          }
          if (this.callForm.beginTime && this.callForm.beginTime[1] !== null) {
            this.callForm.END_TIME = getDateTime(this.callForm.beginTime[1])
          }
          this.callForm.pageSize = 10
          let data = deepClone(this.callForm)
          //        let data = {}
          data.page = 1
          data.pageSize = 10
          data.submitTimeInfo = this.submitTimeInfo
          data.OFFERING_TIME = {}
          data.OFFERING_TIME['$lt'] = OFFERINGTIME
          data.flag = true
          delete data.beginTime
          delete data.submitTime
          data._id = {'$in': this.ids}
          console.log(data)
          this.$store.dispatch('querySubmitedCallSheet', data).then(() => {
          })
        })
      },
//      质检模板 切换
      change (index) {
        this.template = this.QCTempItems[index]
        if (!this.QCTempItems.length) {
          return
        }
        if (this.QCTempItems[index].QUALITY_TYPE !== 'qualityWebchat') {
          if (this.getCallCache === false) {
            this.renderCallCache()
          }
          if (!this.beforeMountState) {
//            this.getSubmittedQualityCheckCallSheet()
          }
          this.beforeMountState = false
        } else {
          if (this.getWebchatCache === false) {
            this.renderWebchatCache()
          }
        }
      },
      recordFileName (server, name, pbx, callBack) {
        if (!server) {
          callBack('')
          return
        }
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (pbx) {
            getCache('accountPbx', pbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      },
//      时间 选择 组件 change
      callTimeChange (value) {
        if (!value) {
          this.callForm.beginTime = ''
          this.callForm.BEGIN_TIME = ''
          this.callForm.END_TIME = ''
        }
      },
//      时间 选择 组件 change
      submitCallTimeChange (value) {
        if (!value) {
          this.callForm.submitTime = ''
        }
      },
      fetchData () {
        this.$store.dispatch('getCache', {type: 'qualityCheckTemplates'}).then((res) => {
          if (!res.length) {
            return
          }
          this.QCTempItems = res
          this.tempStateChange()
        })
      },
      tempStateChange () {
        this.isSearchState = false
        this.isHaveData = true
        if (this.QCTempItems.length) {
          if (this.webOrCallTemp === 1) {
            this.QCTempItems.some((item, index) => {
              if (item.QUALITY_TYPE !== 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE !== 'qualityWebchat'
              }
            })
          } else {
            this.QCTempItems.some((item, index) => {
              if (item.QUALITY_TYPE === 'qualityWebchat') {
                this.num = index
                this.isHaveData = false
                return item.QUALITY_TYPE === 'qualityWebchat'
              }
            })
          }
        }
        //   value 是 模板对应的 index
        this.value = this.num
        this.change(this.value)
        if (!this.once) {
          this.queryList()
        }
        this.once = false
      },
      renderCallCache () {
        this.getCallCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'callType'}).then((res) => {
          let callTypeListData = deepClone(res)
          callTypeListData = callTypeListData.filter(item => {
            item.code_name = m7Language('globalChineseKey.' + item.code_name, null, true) || item.code_name
            return item
          })
          self.callTypeList = callTypeListData
        })
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          agents.forEach((agent) => {
            self.callAgentList.push({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id })
          })
          // agents.forEach((item) => {
          //   item.labelCall = item.displayName + '【' + item.exten + '】'
          // })
          // self.callAgentList = agents
        })
        this.$store.dispatch('getCache', {type: 'queues'}).then((res) => {
          self.callQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'mailQueues'}).then((res) => {
          self.webchatQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'options'}).then((res) => {
          let _dics = []
          for (let i = 0; i < res.length; i++) {
            var obj = res[i]
            if (obj.name && obj.name === '满意度调查选项') {
              _dics = obj.options || []
              break
            }
          }
          let satisfactionList = []
          for (let n = 0; n < _dics.length; n++) {
            if (_dics[n] && _dics[n].name && _dics[n].options[0]) {
              satisfactionList.push({name: _dics[n].name, value: _dics[n].options[0].name})
            }
          }
          self.satisfactionList = satisfactionList
        })
        this.isShowSubmitted = true
      },
//      查询 座席 提交的录音
      getSubmittedQualityCheckCallSheet () {
        this.SubmittedTableLoading = true
        let dataCdrList = {}
        if (this.callForm.submitTime && this.callForm.submitTime[0] !== null && this.callForm.submitTime[1] !== null) {
          dataCdrList.submitTime = {}
          dataCdrList.submitTime['$gte'] = this.callForm.submitTime[0].getTime()
          dataCdrList.submitTime['$lte'] = this.callForm.submitTime[1].getTime()
        }
        this.$store.dispatch('querySubmitedCdrList', dataCdrList).then((res) => {
          if (!res.success) {
            this.$message.error(this.$t('message.default_tips'))
            return
          }
          this.ids = []
          this.submitTimeInfo = {}
          let list = res.list
          for (let i = 0; i < list.length; i++) {
            let id = list[i].callSheetId
            this.ids.push(id)
            this.submitTimeInfo[id] = list[i].submitTime
          }
          if (this.callForm.beginTime && this.callForm.beginTime[0] !== null) {
            if (typeof this.callForm.beginTime[0] === 'string') {
              this.callForm.BEGIN_TIME = this.callForm.beginTime[0]
            } else {
              this.callForm.BEGIN_TIME = getDateTime(this.callForm.beginTime[0])
            }
          }
          if (this.callForm.beginTime && this.callForm.beginTime[1] !== null) {
            if (typeof this.callForm.beginTime[1] === 'string') {
              this.callForm.END_TIME = this.callForm.beginTime[1]
            } else {
              this.callForm.END_TIME = getDateTime(this.callForm.beginTime[1])
            }
          }
          this.callForm.pageSize = 10
          let data = deepClone(this.callForm)
//          let data = {}
//          data.page = 1
//          data.pageSize = 10
          data.submitTimeInfo = this.submitTimeInfo
          data.flag = false
          delete data.beginTime
          delete data.submitTime
          data._id = {'$in': this.ids}
          this.$store.dispatch('querySubmitedCallSheet', data).then((res2) => {
            this.isShowSubmittedTable = true
            this.isSearchState = true
            this.SubmittedTableLoading = false
            if (res2 && res2.success) {
              const list = res2.list || []
              if (list.length === 0) {
                if (!res2.count) {
                  // 第一页且count为0是不再发请求
                  this.paginationCall.currentPage = 1
                  this.callForm.page = 1
                } else {
                  const page = Math.ceil(res2.count / data.pageSize)
                  this.callForm.page = page
                  this.paginationCall.currentPage = page
                  this.turnPage(page)
                  return false
                }
              }
            }
          })
        })
      },
      queryList () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.pagination.currentPage = 1
          this.chatForm.page = 1
        } else {
          this.paginationCall.currentPage = 1
          this.callForm.page = 1
        }        
        this.query()
      },
      query () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$refs.chatForm.validate((valid) => {
            if (valid) {
              this.getQualityCheckWebchatSession()
              this.isSave = false
            }
          })
        } else {
          if (this.QCTempItems.length === 0) {
            this.$message.error(this.$t('qualityCheck.pleaseExployModel'))
            return
          }
          if (!this.$refs.callForm) {
            return
          }
          this.$refs.callForm.validate((valid) => {
            if (valid) {
              if (this.callForm.CALL_TIME_LENGTH_BEGIN && this.callForm.CALL_TIME_LENGTH_END && this.callForm.CALL_TIME_LENGTH_BEGIN >= this.callForm.CALL_TIME_LENGTH_END) {
                this.$message.error(this.$t('qualityCheck.PleaseEnterTheCorrectCallDurationRrange'))
                return
              }
              this.getSubmittedQualityCheckCallSheet()
              this.isSave = false
            }
          })
        }
      },
      getQualityCheckWebchatSession () {
        this.chatForm.menuId = 'quality_check_query'
        if (this.chatForm.beginTime && this.chatForm.beginTime[0] !== null) {
          this.chatForm.beginTimeBegin = getDateTime(this.chatForm.beginTime[0])
        }
        if (this.chatForm.beginTime && this.chatForm.beginTime[1] !== null) {
          this.chatForm.beginTimeEnd = getDateTime(this.chatForm.beginTime[1])
        }
        if (this.chatForm.beginTimeEnd === '' && this.chatForm.beginTimeBegin === '') {
          this.chatForm.beginTime = ''
        }
        if (this.chatForm.createTime) {
          if (typeof this.chatForm.createTime[0] === 'object') {
            this.chatForm.createTimeBegin = getDateTime(this.chatForm.createTime[0])
          } else {
            this.chatForm.createTimeBegin = this.chatForm.createTime[0] || ''
          }
          if (typeof this.chatForm.createTime[1] === 'object') {
            this.chatForm.createTimeEnd = getDateTime(this.chatForm.createTime[1])
          } else {
            this.chatForm.createTimeEnd = this.chatForm.createTime[1] || ''
          }
        }
        let finishArr = this.activeFinish
        if (finishArr && finishArr.length > 0) {
          for (let i = 0; i < finishArr.length; i++) {
            finishArr[i] = finishArr[i].split('__')[0]
          }
        }
        this.chatForm.finishKey = finishArr[finishArr.length - 1]
        this.chatForm.pageSize = 10
        this.webLoading = true
        let _qu = deepClone(this.chatForm)
        _qu.queryCount = true
        this.qu = _qu
        this.allCount = 0
        let data = deepClone(this.chatForm)
        data.applyQcWebchat = true
        if (data.user) {
          data.user = [data.user]
        }
        if (data.submitTime && data.submitTime[0]) {
          data.applyQcWebchatTimeBegin = getDateTime(data.submitTime[0])
        }
        if (data.submitTime && data.submitTime[1]) {
          data.applyQcWebchatTimeEnd = getDateTime(data.submitTime[1])
        }
        delete data.submitTime
        this.$store.dispatch('webchatSearch', {...data, queryCount: true}).then((res) => {
          this.pagination.allCount = res.count
          this.pagination.totalPage = Math.ceil(res.count / 10)
        })
        delete data.createTime
        delete data.submitTime
        data.searchType = 'submit'
        this.$store.dispatch('webchatSearch', data).then((res) => {
          if (data.page === 1 && this.count) {
            this.chatPages = this.count / 10
          }
          const list = res.list || []
          if (list.length === 0) {
            if (res.more) {
              this.turnPage(1)
            } else {
              if (!res.count) {
                // 第一页且count为0是不再发请求
                this.pagination.currentPage = 1
                this.chatForm.morePage = 1
              } else {
                let page = Math.ceil(res.count / data.pageSize)
                this.chatForm.page = page
                this.pagination.currentPage = page
                this.turnPage(page)
                return false
              }
            }
          }
          this.isSearchState = true
          this.webLoading = false
          let listArr = []
          for (let i = 0;i < list.length;i++) {
            let item = deepClone(list[i])
            if (item.finishKey) {
              item.finishReasonTitle = this.finishOptions[item.finishKey] || ''
            } else {
              item.finishReasonTitle = ''
            }
            listArr.push(item)
          }
          this.chatTableData = listArr
          this.chatTableDataHeader = res.tableHeader
        })
      },
      getAllCount () {

      },
      turnPage (pageNum) {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.chatForm.page = pageNum
          this.pagination.currentPage = pageNum
          this.getQualityCheckWebchatSession()
        } else {
          this.callForm.page = pageNum
          this.paginationCall.currentPage = pageNum
          this.getSubmittedQualityCheckCallSheet()
        }
      },
      turnPageRecord (pageNum) {
        this.paginationRecord.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(this.currentId, pageNum)
        } else {
          this.queryRecordCallListenLog(this.currentId, pageNum)
        }
      },
      setHeaderConfig () {
        if (this.template.QUALITY_TYPE !== 'qualityWebchat') {
          this.$store.dispatch('getReportTableHeader', 'quality_call_table_title').then((res) => {
            this.headOptions = res
            this.tableConfigType = 'quality_call_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        } else {
          this.$store.dispatch('getReportTableHeader', 'quality_webchat_table_title').then((res) => {
            this.headOptions = res
            this.tableConfigType = 'quality_webchat_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        }
      },
      closeTableConfig (data) {
        this.isShowTableConfig = false
        if (data === 'save') {
          this.query()
        }
      },
      chatCreateTimeReset () {
        let nowTime = new Date()
        let mtDate = nowTime.getTime()
        let createStartTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 7)).split(' ')[0] + ' 00:00:00'
        let endTime = getFormatDateTime(new Date()).split(' ')[0] + ' 23:59:59'
        let createArr = [createStartTime, endTime]
        return createArr
      },
      createTimeChange (value) {
        if (!value) {
          this.chatForm.createTime = this.chatCreateTimeReset()
        }
      }
    },
    beforeMount () {
      this.beforeMountState = true
      let nowTime = new Date()
      let mtDate = nowTime.getTime()
      let startTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 30)).split(' ')[0] + ' 00:00:00'
      let endTime = getFormatDateTime(new Date()).split(' ')[0] + ' 23:59:59'
      let arr = [startTime, endTime]
      this.callForm.beginTime = arr
      this.chatForm.createTime = this.chatCreateTimeReset()
      this.fetchData()
      this.getSubmittedQualityCheckCallSheet()
      if (isHasFunc('func_call_quality_agent', this.$store.state.session.user)) {
        this.callAgentShow = true
      }
    },
    computed: {
      selectAgents () {
        if (this.$store.getters.userHidden === 'yes') {
          let agentList = this.$store.getters.filterStopAgents && this.$store.getters.filterStopAgents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
          agentList = scopeAgents('qc', agentList)
          return agentList
        }
        return this.callAgentList
      },
      tableDataHeader () {
        let tableHeader = {
          Config: [{ 'order': '1', 'name': 'CALL_NO_SHOW', 'displayname': '主叫号码', 'show': true }, { 'order': '2', 'name': 'DISPOSAL_AGENT', 'displayname': '接听座席', 'show': true }, { 'order': '3', 'name': 'CALLED_NO_SHOW', 'displayname': '被叫号码', 'show': true }, { 'order': '4', 'name': 'CONNECT_TYPE_show', 'displayname': '呼叫类型', 'show': true }, { 'order': '5', 'name': 'ERROR_MEMO', 'displayname': '呼入技能组', 'show': true }, { 'order': '6', 'name': 'INVESTIGATE', 'displayname': '满意度', 'show': true }, { 'order': '7', 'name': 'OFFERING_TIME', 'displayname': '呼叫时间', 'show': true }]
        }
        return this.$store.state.qualityCheck.submitsearchList.tableHeader || tableHeader
      },
      count () {
        return this.$store.state.qualityCheck.submitsearchList.count
      },
      totalPage () {
        return Math.ceil(this.$store.state.qualityCheck.submitsearchList.count / 10) || 0
      },
      tableData () {
        return this.$store.state.qualityCheck.submitsearchList.list
      },
      tempList () {
        return this.$store.state.qualityCheck.tempListSubmit
      }
    },
    activated () {
//      this.isSearchState = false
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .search-pagination
    float right
  .submitted
    height calc(100vh - 158px)
    padding 20px 20px 0
    overflow scroll
    .demo-form-inline
      .el-form-item
        width 100%
        height 100%
        .el-select, .el-date-editor, .el-input
          width 100%
          height 100%
    .tables
      padding-bottom 30px
    .el-dialog
      .scoring
        text-align center
        color $cf-white
        margin-top 40px
        span
          display inline-block
          padding 10px 26px
          border-radius 4px
          cursor pointer
        .off
          background $c-sub
        .save
          background $c-main
          margin-left 40px
      .el-row
        margin-top 12px
        color #8f8f8f
        .el-col-7
        .el-col-11
          line-height 36px
        .el-col-13
          .totalScore
            color $c-sub
    .el-form-item
      margin 0
    .deploy
      height 48px
      border 1px solid #e7e7eb
      border-bottom none
      padding-left 14px
      .page
        margin-top 10px
      .el-pagination
        padding 0
      .table-header-config
        float left
        line-height 42px
        .iconfont
          font-size 18px
          color $c-main
          float left
        .tex
          cursor pointer
          margin-left 10px
          color #000
    .top
      .el-radio
        margin 0 0 0 20px
      .temp
        color $cf-gray1
        display inline-block
        margin-bottom 20px
      .sear
        /*margin-top 20px*/
        .el-row
          padding-bottom 20px
          span
            color $cf-level1
            display inline-block
            margin-left 20px
          .select-wrap
            margin-left -10px
            width 100%
            /deep/.el-cascader
              width 100%
          .temp
            color $cf-gray1
            margin-left 0
          .takeTime
            margin-left 20px
      .el-select
        margin-right 10px
      .sub
        text-align right
        .search
          margin-left 24px
  .padding
   padding-bottom 5px
  .check-padding
    padding-bottom 5px
  .normal .top .sear .label-select-wrap .select-wrap
    margin-left 10px
  .p-styl
    margin-bottom: 20px;
    color: $cf-gray1
  .ml
    margin-left -10px
  .ui-unfold-span
    cursor pointer
    color $c-main
    margin-left 20px
  .ui-affix
    /*padding-bottom 0*/
    margin-top 20px
</style>
